<template>
	<view>
		<view class="text">
			手机号码快速登录
		</view>
		<view>
			<view class="loginDiv">
				<input class="login" type="text" placeholder="请输入手机号" v-model="phone">
			</view>


			<view class="passwordDiv">
				<input class="password" type="text" placeholder="请输入验证码" v-model="password">
				<text class="valicode">获取验证码</text>
			</view>

			<button class="submit" @click="qushouye()">登录</button>
			<view class="xieyihezi">
				<text class="xieyi">登录即代表同意</text><text class="lansexieyi">用户协议</text>
			</view>

		</view>
		<view class="qitahezi">
			<text class="qita">其他方式登录</text>
			<view class="tupiandahezi">
				<view class="tupianhezi">
					<img class="tupian" src="/static/img/weixin.png" alt="">
					<text>微信</text>
				</view>
				<view class="tupianhezi">
					<img class="tupian" src="/static/img/weibo.png" alt="">
					<text>微博</text>
				</view>
				<view class="tupianhezi">
					<img class="tupian" src="/static/img/qq.png" alt="">
					<text>QQ</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				password: ''

			}
		},
		methods: {
			doLogin() {
				console.log("phone", this.phone, "password", this.password)
				uni.request({
					url: this.$serverUrl + '/api/login?phone=' + this.phone + "&password=" + this.password,
					method: 'POST',
					data: {

					},
					success: (result) => {
						console.log(result.data)
					},
					fail: (error) => {
						console.log(error.data)
					}
				})
				},
				qushouye() {
					uni.showToast({
						title: "登陆中"
					})
					setTimeout(() => {
						uni.redirectTo({
							url: "/pages/index/index"
						})
					}, 1000)
				}

			}
		
	}
</script>

<style>
	.text {
		font-size: 20px;
		text-align: center;
		margin-top: 60px;
	}

	.loginDiv {
		font-size: 15px;
		margin: 60px 20px 0px 20px;
		border-bottom: 2px solid #7980eb;
		line-height: 30px;
		height: 40px;
	}

	.login {
		display: inline-block;

	}

	.passwordDiv {
		margin: 0px 20px 0px 20px;
		border-bottom: 2px solid #7980eb;
		display: flex;
		align-items: center;
		height: 60px;
	}

	.password {
		display: inline-block;
		width: 300px;
		height: 40px;

	}

	.valicode {
		color: blue;
		vertical-align: center;
	}

	.xieyihezi {
		width: 200px;
		margin: 30px 130px 0px 130px;
		font-size: 15px;
	}

	.lansexieyi {
		color: #666ee8;
		text-decoration: underline;


	}

	.xieyi {
		text-align: center;
		color: #cccccc;
	}

	.qitahezi {
		margin-top: 180px;
	}

	.qita {
		font-size: 20px;
		display: block;
		text-align: center;
	}

	.tupiandahezi {
		margin-top: 20px;
	}

	.tupianhezi {
		width: 40px;
		height: 80px;
		text-align: center;
		float: left;
		margin-left: 80px;
		color: black;

	}

	.tupian {
		height: 40px;
		width: 40px;
		display: block;
	}

	.submit {
		background-color: #666ee8;
		border-radius: 30px;
		margin: 30px 40px 0px 40px;
		height: 50px;
		color: white;

	}
</style>
